<template>
	<view class="">
		<!-- v-if="amtions == false && juamtions == false" -->
		<view class="page">
			<view class="fanhui_box">
				<view class="pic_bxo" @click="goBack">
					<u-icon name="arrow-left" color="#fff" size="40"></u-icon>
				</view>
			</view>
			<view class="opening_box">
				<image src="https://mh.qingfentool.vip/upload/image/20230520/49b20455ca5a334cd6794726e030cf78.png"
					mode="scaleToFill" />
			</view>
			<!-- 奖品 -->
			<template>
				<!-- 总盒子 -->
				<view class="one_pic" :class="'len_' + cardWardData.length">
					<view v-for="(item, i) in cardWardData" :key="i" class="big_box">
						<view class="one_box">
							<view class="card__content"
								:class="item.isStartChangeCard ? item.level == 1 ? 'linghtType2' : 'linghtType3' : 'linghtType1'"
								:style="item.isStartChangeCard == true ? 'transform: rotateY(1260deg)' : 'transform: rotateY(180deg)'">
								<view class="card__front">
									<image style="width: 100%;height: 100%;" v-if="imageShow"
										src="https://new.qingfentool.vip/upload/image/20230704/08fef53c85ad3f0f1d926deea686e3b1.png">
									</image>
								</view>
								<view class="card__back" v-if="duihaunShow"
									:style="{ backgroundImage: 'url(' + item.bg + ')', backgroundSize: '100% 100%' }">
									<view class="pic_box">
										<image :src="item.prize_icon" mode="scaleToFill" />
									</view>
									<view class="fashu_box">X{{ item.num }}</view>
								</view>
								<view class="card__back" v-if="!duihaunShow"
									style="background-image: url('https://new.qingfentool.vip/upload/image/20230704/08fef53c85ad3f0f1d926deea686e3b1.png');background-size: 100% 100%;">
								</view>
							</view>
						</view>
						<view class="up_name_box" v-if="duihaunShow">{{ item.prize_name }}</view>
						<view class="duihuan_box" @click="duEnter(item, i)" v-if="duihaunShow && boxType == 0">
							兑换大王币{{ item.recovery_price }}
						</view>
						<view class="duihuan_box" @click="duEnter(item, i)" v-if="duihaunShow && boxType == 2">
							兑换大王币{{ item.recovery_price }}
						</view>
						<view class="duihuan_box" @click="duEnter(item, i)" v-if="duihaunShow && boxType == 1">
							兑换大王币{{ (item.recovery_price * item.multiple).toFixed(2) }}
						</view>
					</view>
				</view>
			</template>
			<!-- 底部按钮 -->
			<view class="floot_box" v-if="duihaunShow">
				<view class="wenzi_txt">已为您存放至仓库&ensp;&ensp;&ensp;<text @click="gohegui">前往仓库</text></view>
				<view class="foot_top_box">
					<view class="left_btn_box" @click="quanbuduihuan" v-if="disabledBtn">
						<image src="https://mh.qingfentool.vip/upload/image/20230520/355e438d4bec722a75e16939356a7294.png"
							mode="scaleToFill" />
					</view>
					<view class="left_btn_box" v-else>
						<image src="https://mh.qingfentool.vip/upload/image/20230520/355e438d4bec722a75e16939356a7294.png"
							mode="scaleToFill" />
					</view>
					<view class="right_btn_box" @click="zailaiBtn">
						<image src="https://mh.qingfentool.vip/upload/image/20230520/5f1e9c51f5857c3b84fd040078fbaa08.png"
							mode="scaleToFill" />
					</view>
				</view>
				<view class="foot_bot_box" v-if="boxType == 0">
					<view class="center_btn_box" @click="fhBtn">
						<image src="https://mh.qingfentool.vip/upload/image/20230520/8efe2ef9d17cd50fa4cf838ca6933bef.png"
							mode="scaleToFill" />
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="antions" v-show="amtions == true">
			<l-svga ref="svga"></l-svga>
		</view>
		<view class="antions1" v-show="juamtions == true">
			<l-svga ref="svga1"></l-svga>
		</view> -->
	</view>
</template>
<script>
export default {
	data() {
		return {
			order_id: '', //商品编号
			prizeList: 1,
			idIndex: 0,
			dataLen: 0,
			innerAudioContext: null,
			innerAndiu: null,
			duihuanadiuo: null,
			cardWardData: [],
			isStartChangeCard: '',
			amtions: false, //是否大王
			imageShow: true,
			juamtions: false, //是否将军
			isFZ: true, //是否反转
			duihaunShow: false, //显示兑换
			boxType: '', //盲盒类型1：倍赏
			recPrice: '', //兑换总价
			multiple: 1, //倍数
			dhStatus: 1, //全部兑换状态
			disabledBtn: true, //全部兑换禁用
			tenOpen: '',//十连抽
			submitData: {},
		}
	},
	mounted() {

		// // #ifdef APP-PLUS
		// this.antions()
		// this.jiangjunantions()
		// // #endif
	},
	onLoad(e) {
		this.submitData = JSON.parse(e.data)
		this.playlist()
		let payMode = 1
		if (this.submitData.pay_mode == 1) {
			payMode = 1
		} else if (this.submitData.pay_mode == 2) {
			payMode = 3
		} else if (this.submitData.pay_mode == 3) {
			payMode = 5
		} else if (this.submitData.pay_mode == 4) {
			payMode = 10
		}

		for (let i = 0; i < payMode; i++) {
			this.cardWardData.push({
				"isStartChangeCard": true
			})
		}
	},
	onShow() {
		this.innerAudioContext = uni.createInnerAudioContext()
		this.innerAndiu = uni.createInnerAudioContext()
		this.duihuanadiuo = uni.createInnerAudioContext()
	},
	beforeDestroy() {
		this.innerAudioContext.destroy()
		this.innerAndiu.destroy()
		this.duihuanadiuo.destroy()
	},
	methods: {
		// antions() {
		// 	this.$refs.svga.render(async (parser, player) => {
		// 		const videoItem = await parser.load("https://new.qingfentool.vip/app/animation_3.svga");
		// 		await player.setVideoItem(videoItem);
		// 		// 设置当前动画的循环次数，0代表无限循环 默认 0
		// 		player.loops = 1
		// 		// 设置动画缩放模式，可选值为 Fill / AspectFill / AspectFit
		// 		player.setContentMode('AspectFill')
		// 		// 开始播放动画，reverse = true 时则反向播放。
		// 		player.startAnimation()
		// 		// 监听动画进度
		// 		player.onFinished(() => {
		// 			this.amtions = false
		// 		})
		// 	})
		// },
		// jiangjunantions() {
		// 	this.$refs.svga1.render(async (parser, player) => {
		// 		const videoItem = await parser.load("https://new.qingfentool.vip/app/animation_2.svga");
		// 		await player.setVideoItem(videoItem);
		// 		// 设置当前动画的循环次数，0代表无限循环 默认 0
		// 		player.loops = 1
		// 		// 设置动画缩放模式，可选值为 Fill / AspectFill / AspectFit
		// 		player.setContentMode('AspectFill')
		// 		// 开始播放动画，reverse = true 时则反向播放。
		// 		player.startAnimation()
		// 		// 监听动画进度
		// 		player.onFinished(() => {
		// 			this.juamtions = false
		// 		})
		// 	})
		// },
		// 去盒贵
		gohegui() {
			uni.switchTab({
				url: '/pages/index/cabinetBox'
			})
		},
		// 单个兑换
		duEnter(item, i) {
			let dhArr = [item.id]
			let data = {
				order_id: dhArr
			}
			this.duihuanplayVoice(
				'https://mh.qingfentool.vip/upload/mch/videos/20230524/30cd5c56f1171eef44f877c55b465e79.mp3', this
				.duihuanadiuo)
			this.$Request.post(this.$api.order.exchange, data).then(res => {

				uni.showToast({
					title: res.msg + '已兑换' + res.data.recovery_price.toFixed(2) + '大王币',
					icon: "none"
				})
				this.cardWardData.splice(i, 1)
				if (this.cardWardData.length == 0) {
					setTimeout(() => {
						uni.navigateBack()
					}, 600)
				}
			})
		},
		// 全部兑换
		quanbuduihuan() {
			this.disabledBtn = false
			let data = {
				order_id: this.cardWardData.filter(item => {
					return this.dhStatus == 1 ? (item.level == 0 || item.level == 1) : (item.level == 2 ||
						item.level == 3)
				}).map((val) => {
					return val.id
				})
			}
			this.duihuanplayVoice(
				'https://mh.qingfentool.vip/upload/mch/videos/20230524/30cd5c56f1171eef44f877c55b465e79.mp3', this
				.duihuanadiuo)
			this.$Request.post(this.$api.order.exchange, data).then(res => {
				uni.showToast({
					title: res.msg + '已兑换' + res.data.recovery_price.toFixed(2) + '大王币',
					icon: "none"
				})
				if (this.dhStatus == 2 || data.order_id.length == this.cardWardData.length) {
					setTimeout(() => {
						uni.navigateBack()
					}, 1000)
				} else {
					this.cardWardData = this.cardWardData.filter(item => {
						return this.dhStatus == 2 ? (item.level == 0 || item.level == 1) : (item
							.level == 2 || item.level == 3)
					})
				}
				this.dhStatus++
				setTimeout(() => {
					this.disabledBtn = true
				}, 1000)
			})
		},
		// 再来一次
		zailaiBtn() {
			uni.navigateBack()
		},
		// 返回
		goBack() {
			uni.navigateBack()
		},
		// 反悔
		fhBtn() {
			uni.switchTab({
				url: '/pages/index/cabinetBox'
			})
		},
		//结果数据
		playlist() {
			let data = this.submitData
			this.$Request.post(this.$api.mhapi.newSubmit, data).then(res => {
				uni.setStorageSync('cabShuaxin', 1)
				this.cardWardData = res.data.data
				this.recPrice = res.data.recovery_price
			})
			setTimeout(() => {
				if ((this.innerAudioContext || this.innerAndiu) && this.isFZ) {
					this.rotateCards()
					this.isFZ = false
					this.$forceUpdate()
				}
			}, 1000)
			// })
		},
		rotateCards() {
			// var dwLevel = false
			// var juLevel = false
			// var qtLevel = false
			// var arr = []
			// this.cardWardData.forEach((item) => {


			// arr.push(item.level)

			// })
			this.playVoice(
				'https://new.qingfentool.vip/upload/mch/videos/20230609/3a70446c6d8f72c378accf0d0f36ab6a.mp3',
				this.innerAudioContext)
			this.innerAudioContext.onEnded((res) => {
				this.duihaunShow = true
				this.imageShow = false
			})
			// console.log(this.cardWardData)
			// if (arr.includes(3)) {
			// 	dwLevel = true
			// } else if (arr.includes(2)) {
			// 	juLevel = true
			// } else {
			// 	qtLevel = true
			// }
			// if (dwLevel) {
			// 	this.playVoice(
			// 		'https://new.qingfentool.vip/upload/mch/videos/20230609/3a70446c6d8f72c378accf0d0f36ab6a.mp3',
			// 		this.innerAudioContext)
			// 	this.innerAudioContext.onEnded((res) => {
			// 		// // #ifdef APP-PLUS
			// 		// this.antions()
			// 		// this.playVoice1(
			// 		// 	'https://new.qingfentool.vip/upload/mch/videos/20230704/fd88e8c42b2d6ddbc2a6bc60717b8a28.mp3',
			// 		// 	this.innerAndiu)
			// 		// // #endif

			// 		this.duihaunShow = true
			// 		// // #ifdef APP-PLUS
			// 		// this.amtions = true
			// 		// // #endif
			// 	})
			// } else if (juLevel) {
			// 	this.playVoice(
			// 		'https://new.qingfentool.vip/upload/mch/videos/20230609/3a70446c6d8f72c378accf0d0f36ab6a.mp3',
			// 		this.innerAudioContext)
			// 	this.innerAudioContext.onEnded((res) => {
			// 		// // #ifdef APP-PLUS
			// 		// this.jiangjunantions()
			// 		// this.playVoice1(
			// 		// 	'https://new.qingfentool.vip/upload/mch/videos/20230704/909134b12a4de59eba5357c89ce150ea.mp3',
			// 		// 	this.innerAndiu)
			// 		// // #endif
			// 		this.duihaunShow = true
			// 		// // #ifdef APP-PLUS
			// 		// this.juamtions = true
			// 		// // #endif
			// 	})
			// } else if (qtLevel) {
			// 	this.playVoice(
			// 		'https://new.qingfentool.vip/upload/mch/videos/20230609/3a70446c6d8f72c378accf0d0f36ab6a.mp3',
			// 		this.innerAudioContext)
			// 	this.innerAudioContext.onEnded((res) => {
			// 		this.duihaunShow = true
			// 	})
			// } else {
			// 	return
			// }
		},
		drawBoxEnd_fa() {
			//翻牌结束
		},
		playVoice(url, innerAudioContext) { // url即为音频路径
			if (url) {
				// 判断路径是否已经被赋值，以及音频播放状态 !innerAudioContext.paused为正在播放
				if (this.lastRecord == url && !innerAudioContext.paused) {
					innerAudioContext.stop(); // 停止
					return;
				}
				this.lastRecord = url; // 将路径赋值给定义的变量好做判断
				innerAudioContext.src = url; // 配置音频播放路径
				innerAudioContext.play(); // 播放
				innerAudioContext.loop = false // 是否循环播放
				this.innerAudioContext.volume = (0.09)

			}
		},
		playVoice1(url, innerAndiu) { // url即为音频路径
			////console.log('播放', url);
			if (url) {
				// 判断路径是否已经被赋值，以及音频播放状态 !innerAudioContext.paused为正在播放
				if (this.lastRecord == url && !innerAndiu.paused) {
					innerAndiu.stop(); // 停止
					return;
				}
				this.lastRecord = url; // 将路径赋值给定义的变量好做判断
				innerAndiu.src = url; // 配置音频播放路径
				innerAndiu.play(); // 播放
				innerAndiu.loop = false // 是否循环播放
				this.innerAndiu.volume = (0.2)

			}
		},
		duihuanplayVoice(url, duihuanadiuo) { // url即为音频路径
			if (url) {
				// 判断路径是否已经被赋值，以及音频播放状态 !innerAudioContext.paused为正在播放
				if (this.lastRecord == url && !duihuanadiuo.paused) {
					duihuanadiuo.stop(); // 停止
					return;
				}
				this.lastRecord = url; // 将路径赋值给定义的变量好做判断
				duihuanadiuo.src = url; // 配置音频播放路径
				duihuanadiuo.play(); // 播放
				duihuanadiuo.loop = false // 是否循环播放
				this.duihuanadiuo.volume = (0.09)
			}
		},
	}
}
</script>
<style lang="scss" scoped>
.antions {
	width: 100vw;
	height: 100vh;
	background-image: url('https://new.qingfentool.vip/upload/image/20230704/056077ebdeb221abd6d4ece240721eb5.png');
	background-size: 100% 100%;
	overflow: hidden;
}

.antions1 {
	width: 100vw;
	height: 100vh;
	background-image: url('https://new.qingfentool.vip/upload/image/20230704/056077ebdeb221abd6d4ece240721eb5.png');
	background-size: 100% 100%;
	overflow: hidden;
}

.page {
	background-image: url('https://new.qingfentool.vip/upload/image/20230704/056077ebdeb221abd6d4ece240721eb5.png');
	background-size: 100% 100%;
	width: 100vw;
	min-height: 100vh;

	// 返回
	.fanhui_box {
		width: 100%;
		height: 160rpx;
		position: relative;
		margin: 0 0 30rpx 0;

		.pic_bxo {
			width: 50rpx;
			height: 50rpx;
			position: absolute;
			bottom: 10rpx;
			left: 10rpx;
		}
	}

	// 恭喜已开出
	.opening_box {
		width: 100%;
		height: 142rpx;
		margin: auto;
		margin-bottom: 30rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	// 开奖区总大小
	.one_pic {
		width: 100%;
		height: 800rpx;
		// background-color: aqua;
		margin: auto;
		margin-bottom: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: auto;
		margin-bottom: 60rpx;

		.big_box {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			// background-color: #fff;

			.duihuan_box {
				width: 98%;
				height: 54rpx;
				border-radius: 60rpx;
				border: 1rpx solid #FF9F00;
				box-shadow: inset 0rpx 0rpx 20rpx 0rpx rgba(255, 159, 0, 0.4);
				color: #FF9900;
				text-align: center;
				line-height: 54rpx;
				font-size: 24rpx;
				z-index: 10;
				margin: auto;
			}


			.up_name_box {
				width: 224rpx;
				height: 60rpx;
				text-align: center;
				color: #fff;
				line-height: 60rpx;
				font-size: 24rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}


		// 一个
		.one_box {
			width: 400rpx;
			height: 550rpx;


			.linghtType1 {
				// box-shadow: 0upx 0upx 26upx 4upx #fff;
			}

			.linghtType2 {
				// box-shadow: 0upx 0upx 26upx 4upx #FFC03E;
			}

			.linghtType3 {
				// box-shadow: 0upx 0upx 26upx 4upx #EF623D;
			}

			.card__content {
				position: relative;
				width: 100%;
				height: 100%;
				text-align: center;
				transition: all 4s;
				transform-style: preserve-3d;
				border-radius: 20upx;
			}

			.card__front,
			.card__back {
				position: absolute;
				width: 100%;
				height: 100%;
				-webkit-backface-visibility: hidden;
				backface-visibility: hidden;
				display: flex;
				justify-content: center;
				color: white;
				border-radius: 20upx;
			}

			.card__back {
				transform: rotateY(180deg);
				// background-image: url('https://mh.qingfentool.vip/upload/image/20230520/23ca2b2614004d1dab937e4a591c8445.png');
				// background-size: 100% 100%;
				position: relative;

				.pic_box {
					width: 310rpx;
					height: 300rpx;
					// background-color: #fff;
					position: absolute;
					top: 100rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.name_box {
					width: 70%;
					height: 64rpx;
					position: absolute;
					bottom: 130rpx;
					text-align: center;
					font-size: 28rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 64rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.fashu_box {
					width: 60rpx;
					height: 60rpx;
					position: absolute;
					font-weight: 600;
					bottom: 60rpx;
					font-size: 30rpx;
					color: #FF9900;
				}


			}

			.label {
				display: flex;
				align-items: center;
				margin-top: 6upx;

				.numCla {
					background: rgba(125, 125, 121, 0.3);
					padding: 3upx 15upx;
					position: relative;
					left: -5px;
					z-index: 1;
					color: rgba(250, 225, 174, 1);
					border-radius: 5upx;
					font-size: 20upx;
				}
			}

			.detailBox {
				position: absolute;
				z-index: 111;
				top: 73%;
				font-size: 30upx;
			}
		}

		&.len_2 {

			width: 70%;
			justify-content: space-around;
			align-items: center;

			.big_box {
				// background-color: #fff;
			}

			.one_box {
				width: 200rpx;
				height: 274rpx;

				.card__front,
				.card__back {
					position: absolute;
					width: 100%;
					height: 100%;
					-webkit-backface-visibility: hidden;
					backface-visibility: hidden;
					display: flex;
					justify-content: center;
					color: white;
					border-radius: 20upx;
				}

				.card__back {
					transform: rotateY(180deg);
					// background-image: url('https://mh.qingfentool.vip/upload/image/20230520/23ca2b2614004d1dab937e4a591c8445.png');
					// background-size: 100% 100%;
					position: relative;

					.pic_box {
						width: 180rpx;
						height: 210rpx;
						position: absolute;
						top: 25rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.name_box {
						width: 70%;
						height: 64rpx;
						position: absolute;
						bottom: 74rpx;
						text-align: center;
						font-size: 28rpx;
						font-family: Source Han Sans CN-Medium, Source Han Sans CN;
						font-weight: 500;
						color: #FFFFFF;
						line-height: 64rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.fashu_box {
						// width: 38rpx;
						height: 30rpx;
						position: absolute;
						font-weight: 600;
						bottom: 30rpx;
						font-size: 28rpx;
						color: #FF9900;
					}


				}
			}
		}

		&.len_3 {

			width: 80%;
			justify-content: space-around;
			align-items: center;
			flex-wrap: wrap;

			.big_box {
				width: 50%;
				display: flex;
				justify-content: center;
				// background-color: #fff;

				.one_box {
					width: 200rpx;
					height: 274rpx;

					.card__front,
					.card__back {
						position: absolute;
						width: 100%;
						height: 100%;
						-webkit-backface-visibility: hidden;
						backface-visibility: hidden;
						display: flex;
						justify-content: center;
						color: white;
						border-radius: 20upx;
					}

					.card__back {
						transform: rotateY(180deg);
						// background-image: url('https://mh.qingfentool.vip/upload/image/20230520/23ca2b2614004d1dab937e4a591c8445.png');
						// background-size: 100% 100%;
						position: relative;

						.pic_box {
							width: 180rpx;
							height: 210rpx;
							position: absolute;
							top: 25rpx;

							image {
								width: 100%;
								height: 100%;
							}
						}

						.name_box {
							width: 70%;
							height: 64rpx;
							position: absolute;
							bottom: 74rpx;
							text-align: center;
							font-size: 28rpx;
							font-family: Source Han Sans CN-Medium, Source Han Sans CN;
							font-weight: 500;
							color: #FFFFFF;
							line-height: 64rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						.fashu_box {

							// width: 38rpx;
							height: 30rpx;
							position: absolute;
							font-weight: 600;
							bottom: 30rpx;
							font-size: 28rpx;
							color: #FF9900;
						}


					}
				}
			}

			.big_box:nth-child(1) {
				width: 100%;
				display: flex;
				justify-content: center;

				.duihuan_box {
					width: 40%;
				}

				.one_box {
					width: 200rpx;
					height: 274rpx;

					.card__front,
					.card__back {
						position: absolute;
						width: 100%;
						height: 100%;
						-webkit-backface-visibility: hidden;
						backface-visibility: hidden;
						display: flex;
						justify-content: center;
						color: white;
						border-radius: 20upx;
					}

					.card__back {
						transform: rotateY(180deg);
						position: relative;

						.pic_box {
							width: 180rpx;
							height: 210rpx;
							position: absolute;
							top: 25rpx;

							image {
								width: 100%;
								height: 100%;
							}
						}

						.name_box {
							width: 70%;
							height: 64rpx;
							position: absolute;
							bottom: 74rpx;
							text-align: center;
							font-size: 28rpx;
							font-family: Source Han Sans CN-Medium, Source Han Sans CN;
							font-weight: 500;
							color: #FFFFFF;
							line-height: 64rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						.fashu_box {

							// width: 38rpx;
							height: 30rpx;
							position: absolute;
							font-weight: 600;
							bottom: 30rpx;
							font-size: 28rpx;
							color: #FF9900;
						}


					}
				}
			}


		}

		&.len_4 {

			width: 70%;
			justify-content: space-around;
			align-items: center;
			flex-wrap: wrap;

			.big_box {
				// background-color: #fff;


				.one_box {
					width: 200rpx;
					height: 274rpx;

					.card__front,
					.card__back {
						position: absolute;
						width: 100%;
						height: 100%;
						-webkit-backface-visibility: hidden;
						backface-visibility: hidden;
						display: flex;
						justify-content: center;
						color: white;
						border-radius: 20upx;
					}

					.card__back {
						transform: rotateY(180deg);
						// background-image: url('https://mh.qingfentool.vip/upload/image/20230520/23ca2b2614004d1dab937e4a591c8445.png');
						// background-size: 100% 100%;
						position: relative;

						.pic_box {
							width: 180rpx;
							height: 210rpx;
							position: absolute;
							top: 25rpx;

							image {
								width: 100%;
								height: 100%;
							}
						}

						.name_box {
							width: 70%;
							height: 64rpx;
							position: absolute;
							bottom: 74rpx;
							text-align: center;
							font-size: 28rpx;
							font-family: Source Han Sans CN-Medium, Source Han Sans CN;
							font-weight: 500;
							color: #FFFFFF;
							line-height: 64rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						.fashu_box {
							// width: 38rpx;
							height: 30rpx;
							position: absolute;
							font-weight: 600;
							bottom: 30rpx;
							font-size: 28rpx;
							color: #FF9900;
						}


					}
				}
			}
		}

		&.len_5 {
			width: 97%;
			justify-content: center;
			align-items: center;
			flex-wrap: wrap;



			.big_box {
				width: 30%;
				display: flex;
				justify-content: center;

				.one_box {
					width: 200rpx;
					height: 274rpx;

					.card__front,
					.card__back {
						position: absolute;
						width: 100%;
						height: 100%;
						-webkit-backface-visibility: hidden;
						backface-visibility: hidden;
						display: flex;
						justify-content: center;
						color: white;
						border-radius: 20upx;
					}

					.card__back {
						transform: rotateY(180deg);
						// background-image: url('https://mh.qingfentool.vip/upload/image/20230520/23ca2b2614004d1dab937e4a591c8445.png');
						// background-size: 100% 100%;
						position: relative;

						.pic_box {
							width: 180rpx;
							height: 210rpx;
							position: absolute;
							top: 25rpx;

							image {
								width: 100%;
								height: 100%;
							}
						}

						.name_box {
							width: 70%;
							height: 64rpx;
							position: absolute;
							bottom: 74rpx;
							text-align: center;
							font-size: 28rpx;
							font-family: Source Han Sans CN-Medium, Source Han Sans CN;
							font-weight: 500;
							color: #FFFFFF;
							line-height: 64rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						.fashu_box {
							// width: 38rpx;
							height: 30rpx;
							position: absolute;
							font-weight: 600;
							bottom: 30rpx;
							font-size: 28rpx;
							color: #FF9900;
						}


					}
				}
			}

			.big_box:nth-child(2) {
				width: 40%;
				// background-color: red;
				justify-content: flex-start;
				align-items: flex-start;
				margin-left: 10rpx;

				.duihuan_box {
					width: 76%;
					margin: 0;
				}
			}

			.big_box:nth-child(1) {
				width: 40%;
				display: flex;
				justify-content: flex-end;
				// background-color: #fff;
				align-items: flex-end;
				margin-right: 10rpx;

				.duihuan_box {
					width: 76%;
					margin: 0;
				}
			}


		}

		&.len_6 {
			width: 90%;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;

			.big_box {
				width: 32%;

				.one_box {
					width: 200rpx;
					height: 274rpx;

					.card__front,
					.card__back {
						position: absolute;
						width: 100%;
						height: 100%;
						-webkit-backface-visibility: hidden;
						backface-visibility: hidden;
						display: flex;
						justify-content: center;
						color: white;
						border-radius: 20upx;
					}

					.card__back {
						transform: rotateY(180deg);
						position: relative;

						.pic_box {
							width: 180rpx;
							height: 210rpx;
							position: absolute;
							top: 25rpx;

							image {
								width: 100%;
								height: 100%;
							}
						}

						.name_box {
							width: 70%;
							height: 64rpx;
							position: absolute;
							bottom: 74rpx;
							text-align: center;
							font-size: 28rpx;
							font-family: Source Han Sans CN-Medium, Source Han Sans CN;
							font-weight: 500;
							color: #FFFFFF;
							line-height: 64rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						.fashu_box {
							// width: 38rpx;
							height: 30rpx;
							position: absolute;
							font-weight: 600;
							bottom: 30rpx;
							font-size: 28rpx;
							color: #FF9900;
						}


					}
				}
			}
		}

		&.len_7 {
			width: 90%;
			display: flex;
			justify-content: center;
			flex-wrap: wrap;

			.big_box {
				width: 32%;

				.one_box {
					width: 138rpx;
					height: 145rpx;

					.card__front,
					.card__back {
						position: absolute;
						width: 100%;
						height: 100%;
						-webkit-backface-visibility: hidden;
						backface-visibility: hidden;
						display: flex;
						justify-content: center;
						color: white;
						border-radius: 20upx;
					}

					.card__back {
						transform: rotateY(180deg);
						position: relative;

						.pic_box {
							width: 100rpx;
							height: 120rpx;
							position: absolute;
							top: 6rpx;

							image {
								width: 100%;
								height: 100%;
							}
						}

						.name_box {
							width: 70%;
							height: 64rpx;
							position: absolute;
							bottom: 74rpx;
							text-align: center;
							font-size: 28rpx;
							font-family: Source Han Sans CN-Medium, Source Han Sans CN;
							font-weight: 500;
							color: #FFFFFF;
							line-height: 64rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						.fashu_box {
							// width: 38rpx;
							height: 30rpx;
							position: absolute;
							font-weight: 600;
							bottom: 8rpx;
							font-size: 28rpx;
							color: #FF9900;
						}


					}
				}
			}
		}

		&.len_8 {
			width: 90%;
			display: flex;
			justify-content: center;
			flex-wrap: wrap;

			.big_box {
				width: 32%;

				.one_box {
					width: 138rpx;
					height: 145rpx;

					.card__front,
					.card__back {
						position: absolute;
						width: 100%;
						height: 100%;
						-webkit-backface-visibility: hidden;
						backface-visibility: hidden;
						display: flex;
						justify-content: center;
						color: white;
						border-radius: 20upx;
					}

					.card__back {
						transform: rotateY(180deg);
						position: relative;

						.pic_box {
							width: 100rpx;
							height: 120rpx;
							position: absolute;
							top: 6rpx;

							image {
								width: 100%;
								height: 100%;
							}
						}

						.name_box {
							width: 70%;
							height: 64rpx;
							position: absolute;
							bottom: 74rpx;
							text-align: center;
							font-size: 28rpx;
							font-family: Source Han Sans CN-Medium, Source Han Sans CN;
							font-weight: 500;
							color: #FFFFFF;
							line-height: 64rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						.fashu_box {
							// width: 38rpx;
							height: 30rpx;
							position: absolute;
							font-weight: 600;
							bottom: 8rpx;
							font-size: 28rpx;
							color: #FF9900;
						}


					}
				}
			}
		}

		&.len_9 {
			width: 90%;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;

			.big_box {
				width: 32%;

				.one_box {
					width: 138rpx;
					height: 145rpx;

					.card__front,
					.card__back {
						position: absolute;
						width: 100%;
						height: 100%;
						-webkit-backface-visibility: hidden;
						backface-visibility: hidden;
						display: flex;
						justify-content: center;
						color: white;
						border-radius: 20upx;
					}

					.card__back {
						transform: rotateY(180deg);
						position: relative;

						.pic_box {
							width: 100rpx;
							height: 120rpx;
							position: absolute;
							top: 6rpx;

							image {
								width: 100%;
								height: 100%;
							}
						}

						.name_box {
							width: 70%;
							height: 64rpx;
							position: absolute;
							bottom: 74rpx;
							text-align: center;
							font-size: 28rpx;
							font-family: Source Han Sans CN-Medium, Source Han Sans CN;
							font-weight: 500;
							color: #FFFFFF;
							line-height: 64rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						.fashu_box {
							// width: 38rpx;
							height: 30rpx;
							position: absolute;
							font-weight: 600;
							bottom: 8rpx;
							font-size: 28rpx;
							color: #FF9900;
						}


					}
				}
			}
		}

		&.len_10 {
			width: 90%;
			display: flex;
			justify-content: center;
			flex-wrap: wrap;

			.big_box {
				width: 25%;

				.one_box {
					width: 138rpx;
					height: 145rpx;

					.card__front,
					.card__back {
						position: absolute;
						width: 100%;
						height: 100%;
						-webkit-backface-visibility: hidden;
						backface-visibility: hidden;
						display: flex;
						justify-content: center;
						color: white;
						border-radius: 20upx;
					}

					.card__back {
						transform: rotateY(180deg);
						position: relative;

						.pic_box {
							width: 100rpx;
							height: 120rpx;
							position: absolute;
							top: 6rpx;

							image {
								width: 100%;
								height: 100%;
							}
						}

						.name_box {
							width: 70%;
							height: 64rpx;
							position: absolute;
							bottom: 74rpx;
							text-align: center;
							font-size: 28rpx;
							font-family: Source Han Sans CN-Medium, Source Han Sans CN;
							font-weight: 500;
							color: #FFFFFF;
							line-height: 64rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}



						.fashu_box {
							// width: 38rpx;
							height: 30rpx;
							position: absolute;
							font-weight: 600;
							bottom: 8rpx;
							font-size: 28rpx;
							color: #FF9900;
						}


					}
				}

				.up_name_box {
					width: 158rpx;
					height: 60rpx;
					text-align: center;
					color: #fff;
					line-height: 60rpx;
					font-size: 20rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.duihuan_box {
					width: 98%;
					height: 54rpx;
					border-radius: 60rpx;
					border: 1rpx solid #FF9F00;
					box-shadow: inset 0rpx 0rpx 20rpx 0rpx rgba(255, 159, 0, 0.4);
					color: #FF9900;
					text-align: center;
					line-height: 54rpx;
					font-size: 19rpx;
					z-index: 10;
					margin: auto;
				}
			}
		}

	}




	// 底部
	.floot_box {
		width: 90%;
		height: 290rpx;
		margin: auto;

		.wenzi_txt {
			width: 100%;
			height: 40rpx;
			text-align: center;
			color: #fff;
			font-size: 28rpx;
			margin-bottom: 10rpx;

			text {
				color: #FFAE2A;
			}
		}

		.foot_top_box {
			width: 100%;
			height: 100rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;

			.left_btn_box {
				width: 316rpx;
				height: 96rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.right_btn_box {
				width: 316rpx;
				height: 96rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.foot_bot_box {
			width: 100%;
			height: 100rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.center_btn_box {
				width: 316rpx;
				height: 96rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
}
</style>